<template>
	<view class="container" v-if="!isLoading"
		style="background-image: url('https://i.antiedu.tech/static/background/cert.png');background-size: 100% 100%;">
		<view class="cert">

			<image src="../../../static/images/cert.png"></image>

		</view>
		<view class="content">
			<text class="name">{{detail.nick_name}}</text>，您目前在小蚁亿万单词抽查系统(Anti-ivonne)完成<text
				style="color:#4CA0FC;">{{detail.paper_total}}</text>
			次考试，其中通过<text style="color: #59CC44;">{{detail.paper_total_suc}}</text>次，未通过<text
				style="color: #EC7F71;">{{detail.paper_total_fail}}</text>
			次，通过率为<text style="color: #EC7F71;">{{detail.percent}}%</text>。

		</view>

		<view class="save-xc">
			<view class="btn" @click="toSave">
				保存到手机相册
			</view>
		</view>

	</view>
</template>

<script>
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import * as PaperApi from '@/api/ant/paper'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'



	export default {
		components: {
			MescrollBody
		},
		mixins: [MescrollMixin],
		data() {
			return {
				detail: {},
				isLoading: true
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getPaperDetail()

		},

		methods: {
			
			
			toSave() {
			
				PaperApi.getPosterCert()
					.then(result => {
						console.log(result)
			
						uni.downloadFile({
							url: result.data.imageUrl, //仅为示例，并非真实的资源
							success: (res) => {
								if (res.statusCode === 200) {
									let file = res.tempFilePath;
									uni.saveImageToPhotosAlbum({
										filePath: file,
										success: () => {
											uni.hideLoading();
											uni.showToast({
												title: "已保存至相册",
												duration: 3000
											});
										},
										fail: () => {
											uni.hideLoading();
											uni.showToast({
												title: "图片保存失败",
												duration: 3000
											});
										}
									});
								}
							}
						});
			
					})
			
			
			
			
			
			
			
			},

			getPaperDetail() {
				const app = this
				app.isLoading = true

				PaperApi.getCert()
					.then(result => {
						app.detail = result.data.detail
						app.isLoading = false

					})

			},


		}
	}
</script>

<style lang="scss" scoped>
	.save-xc {
		position: fixed;
		bottom: 10rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.btn {
		width: 60%;
		height: 80rpx;
		border-radius: 60rpx;
		background: linear-gradient(180deg, rgba(22, 132, 252, 1) 0%, rgba(100, 174, 255, 1) 100%);
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}

	.container {
		height: 1100rpx;
		width: 100%;

		background: linear-gradient(180deg, rgba(225, 239, 255, 1) 0%, rgba(255, 255, 255, 0.88) 97%);
	}

	.name {
		border-bottom: solid 1rpx #111;
		padding: 0 20rpx;
	}

	.cert {
		position: relative;
		top: 206rpx;
		left: 284rpx
	}

	.content {
		color: #101010;
		position: relative;
		top: 266rpx;

		width: 80%;
		margin-left: 10%;
		line-height: 60rpx;

	}

	.cert image {
		width: 240rpx;
		height: 124rpx;
	}
</style>